<template>
    <baidu-map
    class="bm-viewbm-view"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
    @ready="handler"
    :mapStyle="mapStyle"
>
</baidu-map>
</template>

<script>
import blueMap from '@/views/cases/js/blueMap.json'

export default {
    data() {
        return {
            //没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
            //当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
            center: { lng: 0, lat: 0 },
            zoom: 3,
            map: null,
            BMap: null,
            mapStyle: {
                styleJson: blueMap
            },
        }
    },
    methods: {
        //由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
        handler({ BMap, map }) {
        this.map = map;
        this.BMap = BMap;
        this.center.lng = 113.397552;
        this.center.lat = 22.526454;
        this.zoom = 15;
        },
    }
}
</script>

<style lang="less" scoped>
.bm-viewbm-view {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/deep/.anchorBL {
  display: none;
}
</style>